import React, {useEffect, useState} from 'react'
import './LoginFormPart.less'
import UserIcon from "../images/login-user-avatar.jpg"
import {Button, Checkbox, Form, Input, message, Modal} from "antd";
import md5 from "md5";
import jsCookie from "js-cookie";

function LoginFormPart() {
    const [form] = Form.useForm(),
        [open,setOpen] = useState(false)

    function onFinish(values) {
        ax.post("/user/login",{
            ...values,
            password:md5(values.password),
        }).then(res=>{

            if (values.password === "123456"){
                message.warning("您的密码为初始密码，请修改！")
                setOpen({
                    phone:values.phone,
                    res
                })
            }else{
                jsCookie.set("info",JSON.stringify(res),{
                    expires:3
                })
                window.location.reload();
            }
        })
    }
    useEffect(()=>{
    },[])
    function onResetPassword(){
        form.validateFields().then(values=>{
            ax.post("/user/modifyPassword",{
                phone:open.phone,
                password:md5(values.password)
            }).then(()=>{
                jsCookie.set("info",JSON.stringify(open.res),{
                    expires:3
                })
                setOpen(false)
                window.location.reload();
            })

        })
    }
    return (
        <div className="login-main">
            {/*<div className="avatar">*/}
            {/*<img src={UserIcon} alt="avatar" />*/}
            {/*</div>*/}
            <div className={"login-card"}>
                <div className={"login-form"}>
                    {/*<h3>偶遇京城无人茶室</h3>*/}

                    <Form
                        name="basic"
                        labelCol={{span: 7,}}
                        wrapperCol={{span: 14,}}
                        onFinish={onFinish}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="用户名"
                            name="phone"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名!',
                                },
                            ]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码!',
                                },
                            ]}
                        >
                            <Input.Password/>
                        </Form.Item>

                        <div className={"login-btn"}>
                            <Button type="primary" htmlType="submit">
                                登录
                            </Button>
                        </div>
                    </Form>
                </div>

            </div>
            {/*<div className="register">*/}
            {/*    <span>忘记密码</span>*/}
            {/*    <span>立即注册</span>*/}
            {/*</div>*/}
            <Modal
                title={"修改密码"}
                onOk={onResetPassword}
                open={open}
                onCancel={()=>setOpen(false)}
            >
                <Form
                    name="resetPassword"
                    labelCol={{span: 7,}}
                    wrapperCol={{span: 14,}}
                    onFinish={onFinish}
                    autoComplete="off"
                    form={form}
                >
                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                            {
                                pattern: /^(?=.*\d)(?=.*[a-zA-Z]).{8,}$/,
                                message: '密码必须包含字母和数字且至少长度为8位',
                            },
                        ]}
                    >
                        <Input.Password/>
                    </Form.Item>
                    <Form.Item
                        name="confirm"
                        label="确认密码"
                        dependencies={['password']}
                        hasFeedback
                        rules={[
                            {
                                required: true,
                                message: '请再次输入密码!',
                            },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (!value || getFieldValue('password') === value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('密码输入不正确!'));
                                },
                            }),
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>
                </Form>

            </Modal>
        </div>
    );
}

export default LoginFormPart;